<template>
  <div class="px-5">
    <!-- 标题 -->
    <div class="py-2 flex text-xs text-gray-400">
      <div class="w-[65%]">歌名歌手</div>
      <div class="w-[25%]">专辑</div>
      <div class="w-[10%] pl-5 pr-1">时长</div>
    </div>
    <!-- 歌曲信息 -->
    <div v-if="songsList.length"
      class="relative flex text-gray-400 duration-200 group/item py-3 items-center hover:bg-gray-200"
      v-for="item in songsList" @dblclick="playSong(item)">
      <!-- 歌曲信息 -->
      <div class="flex w-[65%] pl-3 relative">
        <img :src="item.al.picUrl? item.al.picUrl : '../assets/logo.png'" class="w-12 h-12 bg-green-200 rounded-xs" />
        <div class="absolute top-1/2 left-[1.6rem] -translate-y-1/2 invisible group-hover/item:visible">
          <svg t="1727677590968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4038" width="22" height="22" @click="playSong(item)">
            <path
              d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
              fill="#fff" p-id="4039"></path>
          </svg>
        </div>

        <!-- 歌曲信息 -->
        <div class="w-full text-xs px-3 flex flex-col justify-between">
          <div class="text-black flex items-center">
            <!-- 歌名 -->
            <span class="max-w-[47%] line-clamp-1 text-ellipsis mr-1">{{ item.name }}</span>
            <span v-if="item.fee === 1"
              class="text-green-600 px-1 text-[8px] border-green-600 border rounded">VIP</span>
            <span v-if="item.sq !== null"
              class="text-orange-400 px-1 text-[8px] border-orange-400 border rounded mx-1">臻品母带</span>
            <span @click="goPlaySongMv(item)" v-if="item.mv"
              class="px-1 grid place-items-center border border-gray-400 rounded h-full">
              <svg t="1727677590968" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4038" width="10" height="10">
                <path
                  d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
                  fill="#bfbfbf" p-id="4039"></path>
              </svg>
            </span>
          </div>
          <!-- 歌手名 -->
          <div class="mt-0.5 line-clamp-1 text-ellipsis">
            <span v-for="i in item.ar">{{ i.name }} <i v-if="i != item.ar[item.ar.length - 1]" class="mr-1">|</i></span>
          </div>
        </div>
        <!-- 操作 -->
        <div class="flex gap-4 items-center relative w-full">
          <!-- 喜欢 -->
          <svg t="1727691064145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3494" width="24" height="24">
            <path
              d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z"
              fill="#515151" p-id="3495"></path>
          </svg>
          <!-- 鼠标经过显示遮光罩 -->
          <div class="absolute top-0 left-10 w-full h-full opacity-0 group-hover/item:opacity-50">
            <div class="left-1/2 h-full flex items-center gap-4">
              <!-- 下载 -->
              <svg t="1727691609986" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="12369" width="24" height="24">
                <path
                  d="M514 114.4c-220 0-398.8 178.9-398.8 398.8S294 912 514 912s398.8-178.9 398.8-398.8S734 114.4 514 114.4z m0 754.9c-196.4 0-356.1-159.8-356.1-356.1S317.6 157.1 514 157.1c196.4 0 356.1 159.8 356.1 356.1S710.4 869.3 514 869.3z"
                  p-id="12370" fill="#515151"></path>
                <path
                  d="M540.8 614.7c-1.7 1.7-3.5 3.2-5.5 4.5V252.1h-42.7v367.2c-1.9-1.3-3.8-2.8-5.5-4.5L368.9 496.5l-30.2 30.2L457 644.9c15.7 15.7 36.4 23.6 57 23.6 20.7 0 41.3-7.9 57-23.6l118.3-118.3-30.2-30.2-118.3 118.3zM358.6 697.4h310.7v42.7H358.6z"
                  p-id="12371" fill="#515151"></path>
              </svg>
              <!-- 添加 -->
              <svg t="1727691530652" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="11249" width="18" height="18">
                <path
                  d="M512 4C231.9 4 4 231.9 4 512s227.9 508 508 508 508-227.9 508-508S792.1 4 512 4z m0 971.8C256.3 975.8 48.2 767.7 48.2 512S256.3 48.2 512 48.2 975.8 256.3 975.8 512 767.7 975.8 512 975.8zM774.2 512c0 12.2-9.9 22.1-22.1 22.1h-218v218c0 12.2-9.9 22.1-22.1 22.1-12.2 0-22.1-9.9-22.1-22.1v-218h-218c-12.2 0-22.1-9.9-22.1-22.1 0-12.2 9.9-22.1 22.1-22.1h218v-218c0-12.2 9.9-22.1 22.1-22.1 12.2 0 22.1 9.9 22.1 22.1v218h218c12.2 0 22.1 9.9 22.1 22.1z"
                  fill="#515151" p-id="11250"></path>
              </svg>
              <!-- 更多 -->
              <svg t="1727691428338" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="9720" width="30" height="30">
                <path
                  d="M512 819.2c-169.472 0-307.2-137.728-307.2-307.2s137.728-307.2 307.2-307.2 307.2 137.728 307.2 307.2-137.728 307.2-307.2 307.2z m0-573.44c-146.944 0-266.24 119.296-266.24 266.24s119.296 266.24 266.24 266.24 266.24-119.296 266.24-266.24-119.296-266.24-266.24-266.24z"
                  p-id="9721" fill="#515151"></path>
                <path d="M378.88 512m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" p-id="9722" fill="#515151">
                </path>
                <path d="M512 512m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" p-id="9723" fill="#515151">
                </path>
                <path d="M645.12 512m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" p-id="9724" fill="#515151">
                </path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <!-- 专辑 -->
      <div class="w-[25%] truncate">
        {{ item.al.name }}
      </div>
      <!-- 时长 -->
      <div class="w-[10%] pl-5 pr-1">{{ formatSongTime(item.dt) }}</div>
    </div>
    <!-- 歌曲为空数据 -->
    <div v-else class="text-gray-300 text-center py-2">暂无数据</div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from '@renderer/store'
import { formatSongTime } from '../../hooks'
import { songsType } from '@renderer/store/type'
import { router } from '@renderer/router';

const { songsList } = defineProps<{
  songsList: songsType[]
}>()
const { songDetailStore, playListStore } = useStore()

// 播放
const playSong = (item: any) => {
  // 添加到播放列表中
  playListStore.addAllSongToPlayList([item])
  // 获取歌曲详情
  songDetailStore.getSongDetail(item.id)
  // 获取歌曲url
  songDetailStore.getSongUrl(item.id)
}
// 播放mv
const goPlaySongMv = (item: any) => {
  // 暂停歌曲播放
  // songDetailStore.pauseSong()
  router.push({
    path: '/playMv',
    query: {
      id: item.id
    }
  })
}
</script>
